<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <title>登录界面</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            background: url("images/bg.jpg");
            justify-content: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .form-wrap {
            color: white;
            width: 1200px;
            height: 350px;
            margin: 150px auto;
        }

        .form-wrap .form-title-wrap {
            width: 470px;
            height: 300px;
            background: rgba(63, 71, 90, 0.5);
            border-radius: 3%;
            padding-top: 48px;
            box-shadow: 4px 6px 10px #b1afa9;
        }

        #errorMsg {
            height: 30px;
            color: red;
            text-align: center;
            font-size: 15px;
            padding-top: 10px;
        }

        .form-wrap .form-title-wrap h2 {
            margin-left: 86px;
        }

        .form-wrap .form-title-wrap h2 span {
            margin-left: 20px;
            font-family: 'Roman';
        }

        .form-wrap .form-title-wrap form {
            margin: 4px 0 0 30px;
        }

        .form-wrap .form-title-wrap form input {
            width: 220px;
        }

        .form-wrap .form-title-wrap form button {
            width: 83px;
        }

        #ccgm_hrs_logo {
            margin-left: 10px;
            width: 656px;
            height: 150px;
            color: white;
            font-size: 50px;
            line-height: 150px;
            background: rgba(169, 169, 169, 0.04);
            border-radius: 15px;
            font-family: "华文行楷";
        }
    </style>
</head>
<body>
<div class='form-wrap'>
    <div id="ccgm_hrs_logo">
        学生信息管理系统
    </div>
    <div class="form-title-wrap">
        <div class='form-title'>
            <h2>
                用户登陆
                <span>|</span>
                <span><em>Login</em></span>
            </h2>
        </div>
        <div id="errorMsg"></div>
        <form class='layui-form' method="post">
            <div class="layui-form-item">
                <label for="username" class='layui-form-label'>
                    <i class="layui-icon">
                        &#xe66f;
                    </i>
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name='username' required lay-verify='required|id'
                           placeholder='输入用户名'
                           class="layui-input" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="password" class='layui-form-label'>
                    <i class="layui-icon">
                        &#xe673;
                    </i>
                </label>
                <div class="layui-input-inline">
                    <input type="password" id="password" name='password' required lay-verify='required'
                           placeholder='输入密码' class="layui-input" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="role" class="layui-form-label">
                    <i class="layui-icon">
                        &#xe770;
                    </i>
                </label>
                <div class="layui-input-block">
                    <input type="radio" id="role" name='role' value="user" title='用户' checked
                           lay-filter='ident'/>
                    <input type="radio" name='role' value="admin" title='管理员'
                           lay-filter="ident"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-sm" lay-submit lay-filter='login'>
                        登陆
                    </button>
                    <button type='reset' class="layui-btn layui-btn-normal layui-btn-sm">
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div>

    </div>
    <script src="js/layui/layui.js"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer
                , form = layui.form
                , $ = layui.jquery;
            form.render('radio');

            // 监听提交
            // 提交到servlet
            // 点击按钮提交到servlet
            form.on('submit(login)', function (data) {
                $.ajax({
                    type: "POST",
                    url: "adminLogin",
                    data: data.field,
                    /*contentType:"application/json;charset=UTF-8",*/
                    async: false,
                    dataType: "json",
                    success: function (flag) {
                        if (flag.login) {
                            // 跳转到学生管理主页
                            location.href = "main.jsp";
                        } else {
                            $("#errorMsg").html("用户名或密码错误");
                        }
                    },
                    error: function () {

                    }
                });

                return false;
            });
        });
    </script>
</div>
</body>
</html>
